<template xmlns="http://www.w3.org/1999/html">
  <div>
    <page-header-wrapper :breadcrumb="null">
      <template v-slot:content>
        <div class="page-header-content">
          <div class="content">
            <div class="content-title">
              {{ timeFix }}，{{ user.loginName }}
            </div>
            <div class="content-title" v-if="user.cardNumber !== null && user.cardNumber !== undefined">
              您的租借卡号为：{{ user.cardNumber }}
            </div>
            <div class="content-title" v-else>
              您还未申请租借卡<br/>填写您的手机号和身份证号后即可
              <a-button type="primary" @click="gotoApply">前往申请</a-button>
            </div>
          </div>
        </div>
      </template>
      <template v-slot:extraContent>
        <div class="extra-content" v-if="user.cardId !== null && user.cardId !== undefined">
          <div class="stat-item">
            <a-statistic title="余额" :value="user.balance" suffix=" 元"/>
          </div>
          <div class="stat-item">
            <a-statistic title="总骑行时间" :value="dateTitle"/>
          </div>
        </div>
      </template>
    </page-header-wrapper>
    <a-card
        :bordered="false"
        :loading="loading"
        :bodyStyle="{ padding: '16px 0 0 48px', height: '100%' }"
        :style="{ height: '100%', marginTop: '24px' }">

      <div class="account-settings-info-view">
        <a-row :gutter="16">
          <a-col :md="24" :lg="16">
            <a-form layout="vertical" :form="form">
              <a-form-item label="昵称">
                <a-input
                    v-decorator="['userName', {initialValue: user.userName}]"
                    placeholder="请输入昵称"/>
              </a-form-item>
              <a-form-item label="手机号">
                <a-input
                    v-decorator="['userPhone', {initialValue: user.userPhone, rules: [
                      { validator: validatePhone, trigger: 'blur' }]}]"
                    placeholder="请输入手机号"/>
              </a-form-item>
              <a-form-item label="身份证号">
                <a-input
                    v-decorator="['idCard', {initialValue: user.idCard, rules: [
                      { validator: validateCard, trigger: 'blur' }]}]"
                    placeholder="请输入身份证号"/>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="handleSubmit">更改基本信息</a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </div>
    </a-card>
  </div>
</template>

<script>
import {Empty, Modal} from 'ant-design-vue'
import CardView from "@/views/bike/modules/card/CardView";
import {timeFix} from "@/utils/util";
import {editUser, editUserBasicInfo, getInfo} from "@/api/basic/user";

export default {
  name: 'Personal',
  components: {
    CardView,
    Empty,
  },
  data () {
    return {
      timeFix: timeFix(),
      user: {},
      rideTime: [0, 0, 0],
      dateTitle: '',
      loading: false,

      form: this.$form.createForm(this)
    }
  },
  computed: {},
  created () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      getInfo().then(res => {
        this.user = res.result
        this.calcRideTime()
      }).catch(err => {
        this.$message.error(err.result || '获取用户信息失败')
      })
    },
    calcRideTime () {
      let hour = Math.floor(this.user.during / 60)
      let day = Math.floor(hour / 24)
      this.rideTime = [day, hour - day * 24, this.user.during - hour * 60]
      this.dateTitle = (day > 0 ? day + ' 天 ' : '') +
          (this.rideTime[1] > 0 ? this.rideTime[1] + ' 小时 ' : '') +
          this.rideTime[2] + ' 分钟'
    },
    gotoApply () {
      if (this.user.userPhone !== null && this.user.userPhone.length > 0
          && this.user.idCard !== null && this.user.idCard.length > 0) {
        this.$router.push({path: '/bike/card'})
      } else {
        Modal.confirm({
          title: '提示',
          content: '您还未填写完整个人信息，将无法申请租借卡，确定还要前往吗',
          onOk: () => {
            this.$router.push({path: '/bike/card'})
          },
          onCancel () {
          }
        })
      }
    },
    // 前端验证手机号码
    validatePhone (rule, value, callback) {
      const reg = /^[1][3-9][0-9]{9}$/
      if (value === '' || value === undefined || value === null) {
        callback()
      } else {
        if ((!reg.test(value)) && value !== '') {
          callback(new Error('请输入正确的电话号码'))
        } else {
          callback()
        }
      }
    },
    // 前端验证身份证号
    validateCard (rule, value, callback) {
      const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (value === '' || value === undefined || value === null) {
        callback()
      } else {
        if (!reg.test(value)) {
          callback(new Error('请输入正确的身份证号码'))
        } else {
          callback()
        }
      }
    },
    handleSubmit () {
      const {form: {validateFields}} = this
      this.loading = true
      validateFields((errors, values) => {
        if (!errors) {
          editUserBasicInfo(values)
              .then(() => {
                this.$message.success('用户信息修改成功')
                this.form.resetFields()
                this.getUserInfo()
                this.loading = false
              }).catch(err => {
            this.loading = false
            this.$message.error(err.result || '操作失败！')
          })
        } else {
          this.loading = false
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
@import "./Personal.less";

.project-list {

  .card-title {
    font-size: 0;

    a {
      color: rgba(0, 0, 0, 0.85);
      margin-left: 12px;
      line-height: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: top;
      font-size: 14px;

      &:hover {
        color: #1890ff;
      }
    }
  }

  .card-description {
    color: rgba(0, 0, 0, 0.45);
    height: 44px;
    line-height: 22px;
    overflow: hidden;
  }

  .project-item {
    display: flex;
    margin-top: 8px;
    overflow: hidden;
    font-size: 12px;
    height: 20px;
    line-height: 20px;

    a {
      color: rgba(0, 0, 0, 0.45);
      display: inline-block;
      flex: 1 1 0;

      &:hover {
        color: #1890ff;
      }
    }

    .datetime {
      color: rgba(0, 0, 0, 0.25);
      flex: 0 0 auto;
      float: right;
    }
  }

  .ant-card-meta-description {
    color: rgba(0, 0, 0, 0.45);
    height: 44px;
    line-height: 22px;
    overflow: hidden;
  }
}

.item-group {
  padding: 20px 0 8px 24px;
  font-size: 0;

  a {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}

.members {
  a {
    display: block;
    margin: 12px 0;
    line-height: 24px;
    height: 24px;

    .member {
      font-size: 14px;
      color: rgba(0, 0, 0, .65);
      line-height: 24px;
      max-width: 100px;
      vertical-align: top;
      margin-left: 12px;
      transition: all 0.3s;
      display: inline-block;
    }

    &:hover {
      span {
        color: #1890ff;
      }
    }
  }
}

.mobile {

  .project-list {

    .project-card-grid {
      width: 100%;
    }
  }

  .more-info {
    border: 0;
    padding-top: 16px;
    margin: 16px 0 16px;
  }

  .headerContent .title .welcome-text {
    display: none;
  }
}

</style>
